<template>
  <div class="home-box">
    <el-row>
      <el-col :span="12">
        <el-card class="card">
          <template #header>
            <div class="card-header">
              <span>工作动态</span>
            </div>
          </template>
          <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
            <li v-for="thing in data.thingsList" class="infinite-list-item">
              <div>
                <el-row class="li1">
                  <el-text class="number">
                    {{ thing.number }}
                  </el-text>
                  <el-text class="status">
                    {{ thing.status }}
                  </el-text>
                  <el-text class="driver">
                    配送员:{{ thing.driverName }}
                  </el-text>
                </el-row>
                <el-row class="li2">
                  <el-text class="client">
                    {{ thing.client }}
                  </el-text>
                  <el-text class="consignee">
                    {{ thing.consignee }}
                  </el-text>
                </el-row>
              </div>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="card">
          <template #header>
            <div class="card-header">
              <span>库存统计</span>
            </div>
          </template>
          <div class="pie">
            <BarChart></BarChart>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="row2">
      <el-col :span="12">
        <el-card class="card">
          <template #header>
            <div class="card-header">
              <span>库存报警</span>
            </div>
          </template>
          <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
            <li v-for="product in data.alertList" class="alertStoList">
              <el-text class="alertTest" tag="b">
                <el-icon>
                  <Opportunity/>
                </el-icon>
                &nbsp;&nbsp;{{ product.productName }}库存不足--剩余{{ product.stockCount }}
              </el-text>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="card">
          <template #header>
            <div class="card-header">
              <span>公告</span>
            </div>
          </template>
          <el-text>
            为了更好地服务于全国各地的患者，我们近期大幅拓展了配送网络，新增了多条物流线路和区域仓储中心，特别是在偏远及交通不便地区，我们通过增设配送站点，确保特殊药品能够跨越地域限制，及时送达。
          </el-text>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import MapContain from '../../components/MapContainer/MapContainer.vue'
import BarChart from '../../components/Echarts/BarChart.vue'
import axios from "axios";
import {onMounted, reactive} from "vue";

import {ref} from 'vue'
import {ElMessage} from "element-plus";

const count = ref(0)
const load = () => {
  count.value += 2
}
const data = reactive({
  thingsList: [],
  alertList: []
})

onMounted(() => {
  todoThings();
  getAlertStock();
})

//成功消息
const successMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'success',
  });
}
//失败消息
const errorMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'error',
  });
}

//获取工作动态
const todoThings = () => {
  axios({
    url: "http://localhost:8080/carClient/getAll",
    method: "get",
    params: ""
  }).then((res) => {
    if (res.data.success) {
      data.thingsList = res.data.data;
    } else {
      errorMessage("获取待做事项失败");
    }
  })
}
//获取预警库存
const getAlertStock = () => {
  axios({
    url: "http://localhost:8080/product/stockAlert",
    method: "get",
    params: ""
  }).then((res) => {
    data.alertList = res.data.data;
  })
}
</script>

<style scoped>
.home-box {
  height: 100%;
  width: 100%;
  margin-left: 10px;
  margin-top: 10px;
}

.card {
  width: 600px;
  height: 360px;
  /*margin-left: 10px;*/
}

.row2 {
  margin-top: 15px;
  /*margin-bottom: 15px;*/
}

.card-header {
  text-align: left;
  font-size: 20px;
}

.pie {
  margin-top: -50px;
}

/*代办事项*/
.infinite-list {
  height: 280px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  /*align-items: center;*/
  /*justify-content: center;*/

  height: 70px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}

.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.li1 {
  background: #3de1cf;
  width: 530px;
  height: 30px;
  border-radius: 10px 10px 0px 0px;
}

.number {
  margin-left: 10px;
}

.status {
  margin-left: 80px;
}

.driver {
  margin-left: 200px;
}

.li2 {
  width: 530px;
  height: 40px;
  border-radius: 0px 0px 10px 10px;
  background: #efedcb;
}

.client {
  margin-left: 10px;
  width: 200px;
}

.consignee {
  margin-left: 30px;
}

.alertStoList {
  height: 30px;
  background: var(--el-color-primary-light-9);
  display: flex;
  justify-content: center;
  line-height: 30px;
  margin-top: 10px;
}

.alertTest {
  color: red;
}
</style>